<style>
  .layui-form {
    margin-left: 15px;
  }
  .layui-form-select .layui-input {
    padding-right: 0;
  }
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid p-t-15">

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">管理员管理</a></a>
            <a><cite>管理员列表</cite></a>
          </span>
          <div class="card-toolbar d-flex flex-column flex-md-row">
            <div class="toolbar-btn-action">
              <a class="btn btn-primary m-r-5" href="{:url('admin/add')}"><i class="mdi mdi-plus"></i> 新增</a>
              <a class="btn btn-success m-r-5" id="stateup"><i class="mdi mdi-check"></i>
                启用</a>
              <a class="btn btn-warning m-r-5" id="statedown"><i class="mdi mdi-block-helper"></i>
                禁用</a>
              <a class="btn btn-danger delAll""><i class=" mdi mdi-window-close"></i> 删除</a>
            </div>

            <form class="layui-form" id="layui-form" method="get" role="form" style="display: flex;">
              <input type="hidden" name="action" value="search">
              <select name="search" id="search" lay-filter="search">
                <option value="username">名称</option>
              </select>   
              <input type="text" name="title" placeholder="请选择搜索条件" autocomplete="off" class="layui-input">  
              <button class="layui-btn layui-btn-primary" type="submit">搜索</button>
            </form>
          </div>

          <div class="card-body">

            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="check-all">
                        <label class="custom-control-label" for="check-all"></label>
                      </div>
                    </th>
                    <th>编号</th>
                    <th>管理员名称</th>
                    <th>昵称</th>
                    <th>密码盐</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {foreach $AdminList as $key => $item}
                  <tr>
                    <td>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input ids" name="ids[]" value="{$item['id']}"
                          id="{$item['id']}">
                        <label class="custom-control-label" for="{$item['id']}"></label>
                      </div>
                    </td>
                    <td>{$key+1}</td>
                    <td>{$item.username}</td>
                    <td>{$item.nickname}</td>
                    <td>{$item.salt}</td>
                    <td>
                      {if condition="$item.state == 1"}
                      <!-- <font class="text-success">正常</font> -->
                      <button class="layui-btn layui-btn-warm layui-btn-sm">正常</button>
                      {else /}
                      <button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button>
                      <!-- <font class="text-muted">禁用</font> -->
                      {/if}
                    </td>
                    <td>
                      <div class="btn-group">
                        <a class="btn btn-xs btn-default edit" href="{:url('admin/admin/edit', ['id' => $item.id])}"
                          data-id="{$item.id}" title="" data-toggle="tooltip" data-original-title="编辑"><i
                            class="mdi mdi-pencil"></i></a>
                        <a class="btn btn-xs btn-default ajax-get confirm del" data-id="{$item.id}"
                          data-toggle="tooltip" data-original-title="删除">
                          <i class="mdi mdi-window-close"></i></a>
                      </div>
                    </td>
                  </tr>
                  {/foreach}
                </tbody>
              </table>
            </div>
            <!-- 分页 -->
            {$AdminList->render()}
          </div>
        </div>
      </div>

    </div>

  </div>

</main>
<!--End 页面主要内容-->

<script>
  layui.use(['layer', 'form'], function () {
    var $ = layui.jquery,
    layer = layui.layer
    form = layui.form

    $('.del').click(function () {
      let id = $(this).data('id');
      console.log(id)
      layer.confirm('确定删除该管理员？', { icon: 3, title: '提示' }, function (index) {
        // 发起请求
        $.ajax({
          type: 'post',
          url: `{:url('admin/admin/del')}`,
          data: {
            id
          },
          dataType: 'json',
          success: function (res) {
            if (res.code == 1) {
              layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
                location.href = res.url
                // location.reload()
                layer.close(index)
              })
            } else {
              layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
                layer.close(index)
                location.reload()
              })
            }
          }
        })
        layer.close(index)
      })
    })

    function GetId () {
      // 存放id的数组
      let list = []
      $('input[name="ids[]"]:checked').each(function () {
        // console.log(item);
        list.push($(this).val())
      })
      return list
    }

    // 批量删除
    $('.delAll').click(function () {
      layer.confirm('确定批量删除？', { icon: 3, title: '提示' }, function (index) {
        let list = GetId()
        if (list.length == 0) {
          // alert("至少选择一名管理员!")
          layer.alert('至少选择一名管理员!')
          return false
        }
        // console.log(list)
        $.ajax({
          type: 'post',
          url: `{:url('admin/admin/delAll')}`,
          data: {
            list
          },
          dataType: 'json',
          success: function (res) {
            if (res.code == 1) {
              layer.alert(res.msg, function (index) {
                // location.reload()
                location.href = res.url
                layer.close(index);
              });
            } else {
              layer.alert(res.msg, function (index) {
                location.reload()
                layer.close(index);
              });
            }
          }
        })
        layer.close(index)
      })
    })

    // 批量启用
    $('#stateup').click(function () {
      layer.confirm('确定批量启用？', { icon: 3, title: '提示' }, function (index) {
        let list = GetId()
        if (list.length == 0) {
          layer.alert("至少选择一名管理员!")
          return false
        }
        $.ajax({
          type: 'post',
          url: `{:url('admin/admin/stateUp')}`,
          data: {
            list,
            action: 'stateup'
          },
          dataType: 'json',
          success: function (res) {
            if (res.code == 1) {
              layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
                // location.href = res.url
                layer.close(index)
                location.reload()
              })
            } else {
              layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
                // location.href = res.url
                layer.close(index)
                location.reload()
              })
            }
          },
        })
      })
    })

    // 批量禁用
    $('#statedown').click(function () {
      layer.confirm('确定批量禁用？', { icon: 3, title: '提示' }, function (index) {
        let list = GetId()
        if (list.length == 0) {
          layer.alert("至少选择一名管理员!")
          return false
        }
        $.ajax({
          type: 'post',
          url: `{:url('admin/admin/stateDown')}`,
          data: {
            list,
            action: 'stateDown'
          },
          dataType: 'json',
          success: function (res) {
            if (res.code == 1) {
              layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
                // location.href = res.url
                location.reload()
                layer.close(index)
              })
            } else {
              layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
                // location.href = res.url
                layer.close(index)
                // location.reload()
              })
            }
          },
        })
      })
    })
  
  })

</script>